<template>
    <div class="order-list-page">
        <el-card shadow="hover" class="order-list-card">
            <div class="order-list-toolbar">
                <el-input v-model="keyword" placeholder="搜索订单号/联系人" style="width: 200px" @keyup.enter="handleSearch" />
                <el-select v-model="filterStatus" placeholder="订单状态" clearable style="width: 150px"
                    @change="handleSearch">
                    <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
                </el-select>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
            </div>
            <el-table :data="list" style="width: 100%" stripe border>
                <el-table-column prop="id" label="订单号" width="100" />
                <el-table-column prop="user.username" label="用户" />
                <el-table-column prop="total_price" label="金额" />
                <el-table-column prop="address" label="收货地址" />
                <el-table-column prop="contact" label="联系人" />
                <el-table-column prop="phone" label="联系电话" />
                <el-table-column prop="remark" label="备注" />
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <el-tag v-if="statusTagType(scope.row.status)" :type="statusTagType(scope.row.status)">{{
                            scope.row.status }}</el-tag>
                        <el-tag v-else>{{ scope.row.status }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="下单时间">
                    <template #default="scope">
                        {{ formatDate(scope.row.created_at) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="240">
                    <template #default="scope">
                        <div class="order-action-group">
                            <el-button size="small" @click="handleDetail(scope.row)" class="action-btn">详情</el-button>
                            <el-select v-model="scope.row.status" size="small" style="width: 90px"
                                @change="val => handleStatusChange(scope.row, val)" class="action-btn">
                                <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
                            </el-select>
                            <el-button size="small" type="danger" @click="handleDelete(scope.row.id)"
                                class="action-btn">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :total="total"
                layout="total, prev, pager, next, sizes" :page-sizes="[10, 20, 50, 100]"
                @current-change="handlePageChange" @size-change="handleSizeChange"
                style="margin-top: 16px; text-align: right;" />
        </el-card>
        <el-dialog v-model="detailVisible" title="订单详情" width="600px" class="order-detail-dialog">
            <div v-if="detail" class="order-detail-body">
                <div class="order-detail-main">
                    <div class="order-detail-row"><span class="order-detail-label">订单号：</span>{{ detail.order.id }}
                    </div>
                    <div class="order-detail-row"><span class="order-detail-label">用户：</span>{{
                        detail.order.user?.username }}
                    </div>
                    <div class="order-detail-row"><span class="order-detail-label">金额：</span>{{ detail.order.total_price
                        }}
                    </div>
                    <div class="order-detail-row"><span class="order-detail-label">状态：</span>{{ detail.order.status }}
                    </div>
                    <div class="order-detail-row"><span class="order-detail-label">下单时间：</span>{{
                        formatDate(detail.order.created_at) }}</div>
                </div>
                <div class="order-detail-sub">
                    <div class="order-detail-row"><span class="order-detail-label">收货地址：</span>{{ detail.order.address
                        }}</div>
                    <div class="order-detail-row"><span class="order-detail-label">联系人：</span>{{ detail.order.contact }}
                    </div>
                    <div class="order-detail-row"><span class="order-detail-label">备注：</span>{{ detail.order.remark }}
                    </div>
                </div>
                <el-table :data="detail.items" class="order-detail-table" size="small"
                    style="width: 100%; margin-top: 18px">
                    <el-table-column prop="product.name" label="商品名" />
                    <el-table-column prop="quantity" label="数量" />
                    <el-table-column prop="price" label="单价" />
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getOrderList, getOrderDetail, deleteOrder, updateOrderStatus } from '../api/order'

const list = ref<any[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(10)
const keyword = ref('')
const filterStatus = ref('')
const statusOptions = ['进行中', '已完成', '已取消', '失败', '缺货']

const detailVisible = ref(false)
const detail = ref<any>(null)

const fetchList = async () => {
    const params: any = { page: page.value, pageSize: pageSize.value, keyword: keyword.value }
    if (filterStatus.value) params.status = filterStatus.value
    const res = await getOrderList(params)
    list.value = res.list
    total.value = res.total
}
const handleSearch = () => {
    page.value = 1
    fetchList()
}
const handlePageChange = (val: number) => {
    page.value = val
    fetchList()
}
const handleSizeChange = (val: number) => {
    pageSize.value = val
    page.value = 1
    fetchList()
}
const handleDetail = async (row: any) => {
    const res = await getOrderDetail(row.id)
    detail.value = res
    detailVisible.value = true
}
const handleDelete = (id: number) => {
    ElMessageBox.confirm('确定要删除该订单吗？', '提示', { type: 'warning' })
        .then(async () => {
            await deleteOrder(id)
            ElMessage.success('删除成功')
            fetchList()
        })
}
const handleStatusChange = async (row: any, val: string) => {
    await updateOrderStatus(row.id, val)
    ElMessage.success('状态已更新')
    fetchList()
}
function formatDate(val: string) {
    if (!val) return ''
    const d = new Date(val)
    return isNaN(d.getTime()) ? '' : d.toLocaleString()
}
const statusTagType = (status: string) => {
    switch (status) {
        case '已完成': return 'success'
        case '已取消': return 'info'
        case '失败': return 'danger'
        case '缺货': return 'warning'
        default: return ''
    }
}
fetchList()
</script>

<style scoped>
.order-list-page {
    padding: 24px;
    background: #fff;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.order-list-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
}

.order-list-toolbar {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.action-btn {
    margin-right: 8px;
}

.el-dialog__body {
    padding: 32px 32px 12px 32px;
    border-radius: 16px;
    background: #f8fafc;
}

.el-dialog__header {
    border-radius: 16px 16px 0 0;
    background: #fff;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 8px;
}

.dialog-footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-bottom: 12px;
}

.el-table {
    border-radius: 10px;
    overflow: hidden;
    font-size: 15px;
}

.el-table th,
.el-table td {
    padding: 10px 0;
}

.el-pagination {
    margin-top: 16px;
    justify-content: flex-end;
}

.order-action-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.action-btn {
    margin-right: 0;
    margin-left: 0;
    min-width: 60px;
    border-radius: 6px;
    font-size: 14px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s;
}

.action-btn:last-child {
    margin-right: 0;
}

.action-btn:hover {
    box-shadow: 0 2px 8px 0 rgba(64, 158, 255, 0.08);
}

.order-detail-dialog .el-dialog__body {
    padding: 28px 32px 18px 32px;
    background: #f8fafc;
    border-radius: 0 0 16px 16px;
}

.order-detail-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-detail-main {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
    margin-bottom: 8px;
}

.order-detail-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    color: #666;
    font-size: 15px;
    margin-bottom: 8px;
}

.order-detail-row {
    min-width: 220px;
    margin-bottom: 2px;
    line-height: 1.8;
}

.order-detail-label {
    font-weight: bold;
    color: #333;
    margin-right: 6px;
}

.order-detail-table {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.order-detail-table .el-table__header th {
    background: #f3f6fa;
    font-weight: bold;
    color: #333;
}

.order-detail-table .el-table__body td {
    background: #fcfdff;
    border-bottom: 1px solid #f0f0f0;
}
</style>
